<template>
    <div class="details-container">
        <el-card>
            <h2>商品详情</h2>
            <el-row>
                <el-col :span="12">
                    <p><strong>商品名称：</strong>{{ details.merchandise }}</p>
                    <p><strong>价格：</strong>{{ details.price }}</p>
                    <p><strong>打包费：</strong>{{ details.packingFee }}</p>
                    <p><strong>库存：</strong>{{ details.inventory }}</p>
                    <p><strong>月售：</strong>{{ details.soldMonthly }}</p>
                    <p><strong>所属店铺：</strong>{{ details.affiliation }}</p>
                    <p><strong>状态：</strong>{{ details.status === 'Y' ? '是' : '否' }}</p>
                </el-col>
                <el-col :span="12">
                    <img :src="details.image" alt="商品图片" style="width: 200px; height: auto;" />
                </el-col>
            </el-row>
        </el-card>

        <!-- 新增部分：商品描述和规格属性 -->
        <el-card style="margin-top: 20px;">
            <h2>商品信息</h2>
            <el-row>
                <el-col :span="12">
                    <p><strong>商品类型：</strong>{{ merchandiseInfo.type }}</p>
                    <p><strong>商品描述：</strong>{{ merchandiseInfo.description }}</p>
                    <p><strong>商品主料：</strong>{{ merchandiseInfo.commodityIngredients }}</p>
                    <p><strong>商品口味：</strong>{{ merchandiseInfo.taste }}</p>
                    <p><strong>制作时长：</strong>{{ merchandiseInfo.productTime }}</p>
                    <p><strong>过期日期：</strong>{{ merchandiseInfo.expirationDate }}</p>
                </el-col>
                <el-col :span="12">
                    <h3>规格属性</h3>
                    <p><strong>商品属性：</strong>{{ productSpecifications.attribute }}</p>
                    <p><strong>属性标签：</strong>
                        <el-tag v-for="tag in productSpecifications.label" :key="tag" type="info">{{ tag }}</el-tag>
                    </p>
                    <p><strong>价格：</strong>￥{{ productSpecifications.price }}</p>
                    <p><strong>库存数量：</strong>{{ productSpecifications.inventory }}</p>
                    <p><strong>打包费：</strong>￥{{ productSpecifications.packingFee }}</p>
                </el-col>
            </el-row>
        </el-card>
        <el-card style="margin-top: 20px;">
    <h2>审核意见</h2>
    <el-row>
        <el-col :span="6">
            <p><strong>当前审核人：</strong>周审核</p>
        </el-col>
        <el-col :span="18">
            <el-form :model="reviewForm" label-width="100px">
                <el-form-item label="审核结果：">
                    <el-radio-group v-model="reviewForm.result">
                        <el-radio label="同意">同意</el-radio>
                        <el-radio label="拒绝">拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="reviewForm.result === '拒绝'" label="拒绝原因：">
                    <el-select v-model="reviewForm.reason" placeholder="请选择拒绝原因">
                        <el-option
                            v-for="item in rejectionReasons"
                            :key="item"
                            :label="item"
                            :value="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitReviewForm">提交审核</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</el-card>
    </div>
    
</template>

<script>
import { getDetail ,getMerchandiseDetails,submitReview} from "@/api/merchandise";

export default {
    data() {
        return {
            details: {}, // 商品详情数据
            merchandiseInfo: {
                type: "单品",
                description: "广东河村地方特色早餐小吃",
                commodityIngredients: "大米",
                taste: "清淡",
                productTime: "5分钟",
                expirationDate: "2099-03-20"
            },
            productSpecifications: {
                attribute: "辅料",
                label: ["加香菜", "加葱花"],
                price: 8.0,
                inventory: 9999,
                packingFee: 1.0
            }, 
            reviewForm: {
            merchandiseId: this.$route.params.id, // 商品 ID
            reviewer: "周审核", // 审核人
            result: "", // 审核结果（同意或拒绝）
            reason: ""  // 拒绝原因
        },
        rejectionReasons: ["拒绝原因一", "拒绝原因二", "拒绝原因三"] // 拒绝原因列表
        };
    },
    watch: {
        'reviewForm.result'(newValue) {
            if (newValue === '同意') {
                this.reviewForm.reason = ''; // 清空拒绝原因
            }
        }
    },
    created() {
        this.fetchDetails();
    },
    methods: {
        // 获取商品详情
        fetchDetails() {
            const id = this.$route.params.id; // 获取路由参数中的商品 ID
            getDetail(id).then((response) => {
                this.details = response.data; // 设置详情数据
                console.log("41", this.details);
            }).catch((error) => {
                console.error("获取商品详情失败：", error);
            });
              // 调用第二个接口，获取商品信息和规格属性
             getMerchandiseDetails(id).then((response) => {
                 this.merchandiseInfo = response.data.merchandiseInfo; // 设置商品信息
                 this.productSpecifications = response.data.productSpecifications; // 设置商品规格信息
             }).catch((error) => {
                console.error("获取商品信息失败：", error);
            });
        },
          // 提交审核结果
    submitReviewForm() {
        if (!this.reviewForm.result) {
            this.$message.error("请选择审核结果");
            return;
        }
        if (this.reviewForm.result === "拒绝" && !this.reviewForm.reason) {
            this.$message.error("请选择拒绝原因");
            return;
        }

        submitReview(this.reviewForm).then(() => {
            this.$message.success("审核结果提交成功");
        }).catch((error) => {
            console.error("审核结果提交失败：", error);
            this.$message.error("审核结果提交失败");
        });
    }
    }
};
</script>

<style scoped>
.details-container {
    padding: 20px;
}
</style>